<template>
  <div class="q-pa-md">
    <q-table
      :rows="box.rows"
      :columns="columns"
      row-key="name"
      :selected-rows-label="getSelectedString"
      selection="multiple"
      v-model:selected="box.selected"
    >
      <!-- 表体部分 -->

    <!-- 表体部分 -->
      <template v-slot:body="props">

          <q-tr :props="props">
              <q-td>
                <template v-slot:body-cell="s">
                {{s.rowIndex}}
                </template>
              </q-td>
              <q-td>
              </q-td>

          </q-tr>


      </template>
      </q-table>
    <div class="q-mt-md">
      Selected: {{ JSON.stringify(box.selected) }}
    </div>
    <div class="q-mt-md">
      Selected: {{ props}}
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRaw} from 'vue'




export default {
  setup () {
    const columns = [
      {
        name: 'desc',
        label: 'Dessert (100g serving)',
        align: 'left',
        field:  'desc',
        required: true,
      },
      { name: 'calories', align: 'center', label: 'Calories', field: 'calories' , required: true,},
      { name: 'fat', label: 'Fat (g)', field: 'fat' },
      // { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
      // { name: 'protein', label: 'Protein (g)', field: 'protein' },
      // { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
      // { name: 'calcium', label: 'Calcium (%)', field: 'calcium' },
      // { name: 'iron', label: 'Iron (%)', field: 'iron'}
    ]

    const box = reactive({
      selected: [],
      rows : [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          // carbs: 24,
          // protein: 4.0,
          // sodium: 87,
          // calcium: '14%',
          // iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          // carbs: 37,
          // protein: 4.3,
          // sodium: 129,
          // calcium: '8%',
          // iron: '1%'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          // carbs: 23,
          // protein: 6.0,
          // sodium: 337,
          // calcium: '6%',
          // iron: '7%'
        },
        // {
        //   name: 'Cupcake',
        //   calories: 305,
        //   fat: 3.7,
        //   carbs: 67,
        //   protein: 4.3,
        //   sodium: 413,
        //   calcium: '3%',
        //   iron: '8%'
        // },
        // {
        //   name: 'Gingerbread',
        //   calories: 356,
        //   fat: 16.0,
        //   carbs: 49,
        //   protein: 3.9,
        //   sodium: 327,
        //   calcium: '7%',
        //   iron: '16%'
        // },
        // {
        //   name: 'Jelly bean',
        //   calories: 375,
        //   fat: 0.0,
        //   carbs: 94,
        //   protein: 0.0,
        //   sodium: 50,
        //   calcium: '0%',
        //   iron: '0%'
        // },
        // {
        //   name: 'Lollipop',
        //   calories: 392,
        //   fat: 0.2,
        //   carbs: 98,
        //   protein: 0,
        //   sodium: 38,
        //   calcium: '0%',
        //   iron: '2%'
        // },
        // {
        //   name: 'Honeycomb',
        //   calories: 408,
        //   fat: 3.2,
        //   carbs: 87,
        //   protein: 6.5,
        //   sodium: 562,
        //   calcium: '0%',
        //   iron: '45%'
        // },
        // {
        //   name: 'Donut',
        //   calories: 452,
        //   fat: 25.0,
        //   carbs: 51,
        //   protein: 4.9,
        //   sodium: 326,
        //   calcium: '2%',
        //   iron: '22%'
        // },
        // {
        //   name: 'KitKat',
        //   calories: 518,
        //   fat: 26.0,
        //   carbs: 65,
        //   protein: 7,
        //   sodium: 54,
        //   calcium: '12%',
        //   iron: '6%'
        // }
      ]
    });
  function  getSelectedString () {
    if (box.selected.length === 0){
      var SelectedStr=''
    }else if (box.selected.length ===1){
      SelectedStr= box.selected.length + " record "  + "selected of " + box.rows.length
    }else {
      SelectedStr= box.selected.length + " records "  + "selected of " + box.rows.length
    }
      return SelectedStr
    }



    return {
      box,
      columns,
      getSelectedString

    }

  }
}
</script>
